<template>
  <a-layout-header :style="headerStyle">
    <a-affix :offset-top="top">
      <div class="top_navgation">
        <!-- 顶部导航栏 -->
        <div class="search">
          <a-row class="top_search">
            <a-col :span="12">
              <ul style="display: flex">
                <li v-if="isLogin" @click="doLogin" style="font-size: 11px; font-weight: 200">
                  <router-link to="/">
                    <PoweroffOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />{{ tipContent }}
                  </router-link>
                </li>
                <li v-else @click="doLogout" style="font-size: 11px; font-weight: 200">
                  <router-link to="/">
                    <PoweroffOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />{{ tipContent }}
                  </router-link>
                </li>
                <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                  <router-link to="/register">
                    <SendOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />免费注册
                  </router-link>
                </li>
              </ul>
            </a-col>
            <a-col :span="12">
              <ul style="display: flex">
                <li v-if="isBusiness" @click="toSystem" style="margin-left: 20px; font-size: 11px; font-weight: 200">
                  <a :href="setting.backend">
                    <AppstoreOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />商家后台
                  </a>
                </li>
                <!-- <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link @click="toPerimeter" to="">
                    <BankOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />周边
                  </router-link>
                </li> -->
                <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                  <router-link @click="toCart" to="">
                    <ShoppingCartOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />购物车
                  </router-link>
                </li>
                <li style="margin-left: 20px; font-size: 11px; font-weight: 200">
                  <a-dropdown>
                    <router-link to="/">
                      <StarOutlined style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        " />收藏夹
                      <DownOutlined style="color: coral" />
                    </router-link>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <router-link style="font-size: 10px" to="/collectgoods">收藏的宝贝</router-link>
                        </a-menu-item>
                        <a-menu-item>
                          <router-link style="font-size: 10px" to="/collectstores">收藏的店铺</router-link>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </li>
                <li @click="toPersonal" style="margin-left: 20px; font-size: 11px; font-weight: 200">
                  <router-link to="/">
                    <DesktopOutlined style="margin-right: 5px; padding-top: 4px; color: coral" />个人中心
                  </router-link>
                </li>
              </ul>
            </a-col>
          </a-row>
        </div>
        <!-- 图标区 -->
        <a-row class="top_serach">
          <a-col :span="8" style="display: flex; justify-content: center; align-items: center">
            <div>
              <!-- <a-image
                :width="200"
                :preview="false"
                src="https://pic.imgdb.cn/item/65564497c458853aeffcd358.png"
              /> -->
              <a-image :width="220" :preview="false" :src="headerLogo" />
            </div>
          </a-col>

          <a-col :span="16" style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
            ">
            <div style="width: 80%; padding-left: 50px">
              <a-input :placeholder="
                  selectMsg === '宝贝' ? '请输入商品名称' : '请输入店铺名称'
                " v-model:value="searchMsg">
                <template #prefix>
                  <!-- <a-select v-model:value="selectMsg">
                    <a-select-option value="宝贝">宝贝</a-select-option>
                    <a-select-option value="店铺">店铺</a-select-option>
                  </a-select> -->
                  <a-dropdown>
                    <a style="color: black; margin-left: 5px; margin-right: 10px" class="ant-dropdown-link"
                      @click.prevent>
                      {{ selectMsg }}
                      <DownOutlined />
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item @click="changeValue1">
                          <a href="javascript:;">宝贝</a>
                        </a-menu-item>
                        <a-menu-item @click="changeValue2">
                          <a href="javascript:;">店铺</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
                <template #suffix>
                  <a-button style="
                      border-color: #ff5000;
                      margin-right: 3px;
                      background-color: #ff5000;
                      border-radius: 50px;
                      font-size: 15px;
                      font-weight: 600;
                      color: #fff;
                    " @click="doSearch">搜索</a-button>
                </template>
              </a-input>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-affix>
  </a-layout-header>
</template>
<script setup>
import {
  StarOutlined,
  ShoppingCartOutlined,
  DownOutlined,
  DesktopOutlined,
  SendOutlined,
  PoweroffOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import router from "@/router";
import { ref } from "vue";
import { useAuthorizationStore } from "@/stores/authorization";
import { useUserStore } from "@/stores/user";
import { logout } from "@/api/user";
import { search } from "@/api/goods";
import { logo } from "@/stores/logo.js";
import setting from "@/setting.js";

const headerLogo = ref("");
headerLogo.value = logo;
const userStore = useUserStore();
const authorizationStore = useAuthorizationStore();
const tipContent = ref("亲，请登录！");
const isLogin = ref(true);
const isBusiness = ref(false);
if (authorizationStore.authorization) {
  tipContent.value = "退出";
  isLogin.value = false;
  if (userStore.user.role === "商户") {
    isBusiness.value = true;
  }
}

function doLogin() {
  router.push("/login");
}

const selectMsg = ref("宝贝");
const searchMsg = ref("");
//搜索
function changeValue1() {
  selectMsg.value = "宝贝";
}
function changeValue2() {
  selectMsg.value = "店铺";
}
const goodsId = ref([]);
const storeIds = ref([]);
function doSearch() {
  if (selectMsg.value === "宝贝" && searchMsg.value !== "") {
    search(searchMsg.value, selectMsg.value).then((res) => {
      if (res.code === 200) {
        goodsId.value = res.data;
        router.push({
          path: "search",
          query: { msg: searchMsg.value, id: goodsId.value },
        });
      }
    });
  } else if (selectMsg.value === "店铺" && searchMsg.value !== "") {
    search(searchMsg.value, selectMsg.value).then((res) => {
      if (res.code === 200) {
        storeIds.value = removeDuplicate(res.data);
        router.push({
          path: "searchstore",
          query: { msg: searchMsg.value, id: storeIds.value },
        });
      }
    });
  } else {
    message.warning("请输入搜索关键字.....");
  }
}

//数组去重方法
function removeDuplicate(arr) {
  const newArr = [];
  arr.forEach((item) => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item);
    }
  });
  return newArr; // 返回一个新数组
}

//退出
function doLogout() {
  logout(userStore.user.key).then((res) => {
    if (res.code === 200) {
      userStore.removeUser();
      authorizationStore.removeAuthorization();
      message.success("退出成功！");
      window.location.reload();
    }
  });
}

//跳往周边
function toPerimeter() {
  router.push("/perimeter");
}

//跳往个人中心
function toPersonal() {
  if (authorizationStore.authorization) {
    router.push("/personal");
  } else {
    router.push("/login");
  }
}

//跳往购物车
function toCart() {
  if (authorizationStore.authorization) {
    router.push("/cart");
  } else {
    message.success("请先登录哦！");
    router.push("/login");
  }
}

//样式绑定
const headerStyle = {
  color: "#fff",
  height: "145.8px",
  paddingInline: "0px",
  lineHeight: "18px",
  backgroundColor: "#f4f4f5",
};
</script>
<style scoped>
a:hover {
  color: red;
}
.top_navgation {
  height: 140px;
  background-color: #fff;
  color: #303133;
}
.search {
  height: 30px;
  background-color: #f4f4f5;
}
.top_search {
  height: 30px;
  margin-left: 150px;
  margin-right: 150px;
  width: 80%;
  padding-top: 3px;
}
.top_serach {
  height: 100px;
  background-color: #fff;
  display: flex;
  margin-left: 141.5px;
  margin-right: 141.5px;
}

ul {
  list-style-type: none;
}

:deep(.slick-slide) {
  height: 310px;
  background: #364d79;
  overflow: hidden;
  border-radius: 10px;
}

.input_search {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  width: 100%;
}

:deep(.ant-input) {
  height: 35px;
}

:deep(.ant-input-affix-wrapper) {
  border-radius: 50px;
  height: 40px;
  border-color: #ff5000;
  border-width: 2px;
  padding: 0;
}

:deep(.css-dev-only-do-not-override-b92jn9).ant-select:not(
    .ant-select-customize-input
  )
  .ant-select-selector {
  height: 38px;
  padding-top: 3px;
  border-radius: 50px 0 0 50px;
  border-color: #ff5000;
  border-width: 1px;
}

.demo-dropdown-wrap :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>